<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div class="btn">边框移动</div>
			<span class="span1">液位仪</span>
			<span class="span2">液位仪</span>
		</div>
		</div>
	</body>

	<style>
		.btn {
			width: 300px;
			height: 60px;
			border: 20px solid blue;
			text-align: center;
			position: absolute;
			line-height: 60px;
		}

		.span1,
		.span2 {
			display: inline-block;
			width: 50px;
			height: 20px;
			text-align: center;
			font-size: 6px;
			position: absolute;
			transition: all 0.5s;
			transform: skew(50deg);
			color: red;
			background-color: #FFFFFF;
		}

		.span1 {
			top: 8px;
			left: 40px;
		}

		.span2 {
			top: 88px;
			left: 250px;
		}

		.btn:hover~.span1 {
			transform: translateX(100px) skew(50deg);
		}

		.btn:hover~.span2 {
			transform: translateX(-100px) skew(50deg);
		}
	</style>
</html>
